<!--
 * @Author: yehongbo 1394168736@qq.com
 * @Date: 2024-02-05 15:19:52
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-02-21 14:32:39
 * @FilePath: \giteeDownload\testthree\src\views\rectLight.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container" style="height:100vh;width:100vw;">

  </div>
</template>

<script setup>
import * as THREE from 'three'
// 创建场景
const scene = new THREE.Scene();
// 创建摄像机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;
scene.add(cube);
// 添加光源
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 10, 0);
light.castShadow = true;
scene.add(light);
// 添加辅助线
const helper = new THREE.CameraHelper(light.shadow.camera);
scene.add(helper);
// 移动摄像机
camera.position.z = 5;
// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
</script>
<style scoped>
#container {
  width: 100vw;
  height: 100vh;
}
</style>